<template>
	<view class="main">
		<view class='search acea-row '>
			<view class='input acea-row row-middle'>
				<text class='iconfont icon-sousuo2'></text>
				<input class="placeholder" type='text' @input="setValue" :value='searchValue' placeholder='商品编码/商品名称'
					placeholder-class='placeholder' confirm-type="search" @confirm="searchBut()"></input>
			</view>
			<view class='bnt' @tap='searchBut'>搜索</view>
		</view>
		<view class="productList">
			<view class="productList_son" v-for="item in orderList" :key="item.id" @tap="selectProduct(item)">
				<view class='pictrue'>
					<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
				</view>
				<view class="center">
					<view class="center_title">
						{{item.name}}
					</view>
					<view class="center_id">
						商品编码: {{item.id}}
					</view>
					<view class="center_inventory">
						商品库存: {{item.stock}} 件 商品售价:{{item.price}}
					</view>
					<view v-for="(items,indexs) in item.list" :key="indexs">
						<text>{{items.sku}} </text> <text style="margin-left: 20rpx;">{{items.stock}} 件</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	import getList from '@/mixins/getlist.js'
	import {
		saleProductlist
	} from '../../api/index.js'
	export default {
		data() {
			return {
				searchValue: '',
				type: null,
				orderNo: null
			}
		},
		components: {
			easyLoadimage
		},
		mixins: [getList],
		onShow() {
			this.getOrderList()
		},
		onLoad(option) {
			this.type = option?.type
			this.orderNo = option?.orderNo
		},
		 // 下拉刷新
		onPullDownRefresh() {
			// 重置列表状态
			this.loadend = false
			this.loading = false
			this.page = 1
			this.orderList = []
			
			// 重新获取商品列表
			this.getOrderList().then(() => {
				// 停止下拉刷新动画
				uni.stopPullDownRefresh()
			}).catch(() => {
				// 即使请求失败也要停止下拉刷新动画
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			selectProduct(item) {
				if (this.type == 'add') {
					uni.navigateBack({
						success: () => {
							// console.log(62);
							uni.$emit('addProduct', item)
						}
					})
				}
			},
			setValue: function(event) {
				this.$set(this, 'searchValue', event.detail.value);
			},
			searchBut() {
				this.loadend = false
				this.loading = false
				this.page = 1
				this.orderList = []
				this.getOrderList()
			},
			/**
			 * 获取订单列表
			 */
			getOrderList() {
				let that = this;
				if (that.loadend) return Promise.resolve();
				if (that.loading) return Promise.resolve();
				that.loading = true;
				that.loadTitle = "加载更多";
				
				return saleProductlist({
					page: that.page,
					limit: that.limit,
					keyword: that.searchValue,
					orderNo: that.orderNo
				}).then(res => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.orderList = that.$util.SplitArray(list, that.orderList);
					that.$set(that, 'orderList', that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "我也是有底线的" : '加载更多';
					that.page = that.page + 1;
					that.isShow = true;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = "加载更多";
					throw err; // 重新抛出错误以便上层处理
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.main {
		background: #fff;
		height: 100vh;
		width: 100vw;
	}

	.main .search {
		padding: 18rpx 40rpx;
		display: flex;
	}

	.main .search .input {
		width: 85vw;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		height: 66rpx;
	}

	.main .search .input input {
		width: 12vw;
		font-size: 28rpx;
	}

	.main .search .input .placeholder {
		color: #bbb;
	}

	.main .search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.main .search .bnt {
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
		color: #282828;
		margin-left: 24rpx;
	}



	.productList {
		padding: 0 40rpx;

		&_son {
			display: flex;
			margin-top: 78rpx;
			margin-bottom: 56rpx;
			padding: 0 60rpx;
			background-color: #f7f7f7;
			padding: 56rpx 78rpx;
			border-radius: 20rpx;

			.pictrue {
				width: 200rpx;
				height: 200rpx;

				// margin: 78rpx auto 56rpx auto;
				image {
					width: 100%;
					height: 100%;
					border-radius: 14rpx;
					overflow: hidden;
				}
			}

			.center {
				margin-left: 100rpx;
				max-width: calc(100% - 414rpx - 100rpx);

				&_title {
					// max-width: 500rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden
				}
			}
		}
	}

	.placeholder {
		color: #bbb;
		width: calc(70%) !important;
	}
</style>
